import React, { useState } from 'react';

function CourseFilter({ onFilter }) {
  const [filters, setFilters] = useState({
    name: '',
    teacher: '',
    grade: '',
    major: '',
    sort_by: 'id',
    order: 'asc'
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFilters(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onFilter(filters);
  };

  const handleReset = () => {
    setFilters({
      name: '',
      teacher: '',
      grade: '',
      major: '',
      sort_by: 'id',
      order: 'asc'
    });
    onFilter({});
  };

  return (
    <div className="course-filter">
      <form onSubmit={handleSubmit}>
        <div className="filter-row">
          <div className="filter-item">
            <label htmlFor="name">课程名</label>
            <input
              type="text"
              id="name"
              name="name"
              value={filters.name}
              onChange={handleChange}
              placeholder="搜索课程名"
            />
          </div>

          <div className="filter-item">
            <label htmlFor="teacher">教师</label>
            <input
              type="text"
              id="teacher"
              name="teacher"
              value={filters.teacher}
              onChange={handleChange}
              placeholder="搜索教师"
            />
          </div>

          <div className="filter-item">
            <label htmlFor="grade">适用年级</label>
            <select
              id="grade"
              name="grade"
              value={filters.grade}
              onChange={handleChange}
            >
              <option value="">所有年级</option>
              <option value="1">大一</option>
              <option value="2">大二</option>
              <option value="3">大三</option>
              <option value="4">大四</option>
            </select>
          </div>

          <div className="filter-item">
            <label htmlFor="major">专业</label>
            <select
              id="major"
              name="major"
              value={filters.major}
              onChange={handleChange}
            >
              <option value="">所有专业</option>
              <option value="计算机科学">计算机科学</option>
              <option value="软件工程">软件工程</option>
              <option value="数据科学">数据科学</option>
              <option value="人工智能">人工智能</option>
              <option value="网络工程">网络工程</option>
            </select>
          </div>
        </div>

        <div className="filter-row">
          <div className="filter-item">
            <label htmlFor="sort_by">排序字段</label>
            <select
              id="sort_by"
              name="sort_by"
              value={filters.sort_by}
              onChange={handleChange}
            >
              <option value="id">默认排序</option>
              <option value="name">课程名</option>
              <option value="teacher_rating">教师评分</option>
              <option value="easiness_rating">难度评分</option>
              <option value="homework_rating">作业评分</option>
              <option value="selected_count">选课人数</option>
            </select>
          </div>

          <div className="filter-item">
            <label htmlFor="order">排序方式</label>
            <select
              id="order"
              name="order"
              value={filters.order}
              onChange={handleChange}
            >
              <option value="asc">升序</option>
              <option value="desc">降序</option>
            </select>
          </div>

          <div className="filter-actions">
            <button type="submit" className="btn btn-primary">
              <i className="fas fa-search"></i> 搜索
            </button>
            <button type="button" className="btn btn-secondary" onClick={handleReset}>
              <i className="fas fa-redo"></i> 重置
            </button>
          </div>
        </div>
      </form>
    </div>
  );
}

export default CourseFilter;
